<template>
    <div class="plandetail">
      <!-- <div class="zheBox" v-if="yearFlag"> -->
          <!-- <el-select
              v-model="ruleForm.academicYear"
              placeholder="请选择开始学年"
            >
              <el-option
                v-for="item in bignSchoolYearOptions"
                :key="item.id"
                :label="item.beginDate"
                :value="{value:item.id,label:item.beginDate}"
              >
              </el-option>
            </el-select>
            -
            <el-select
              v-model="ruleForm.endYear"
              placeholder="请选择开始学年"
            >
              <el-option
                v-for="item in endYearOptions"
                :key="item.id"
                :label="item.beginDate"
                :value="{value:item.id,label:item.beginDate}"
              >
              </el-option>
            </el-select> -->
          <!-- <el-input type="text" v-model="academicYear" placeholder="请输入姓名"></el-input>
          <el-input type="text" v-model="endYear" placeholder="请输入姓名"></el-input> -->

           <!-- <el-button style="margin-top:10px;width:200px;" @click="yearSure">确定</el-button>
           <el-button style="margin-top:10px;width:200px;" @click="quxiao1">取消</el-button> -->
        <!-- </div> -->
      <el-card>
            <h4>学年</h4>
            <el-select
              v-model="ruleForm.academicYear"
              placeholder="请选择开始学年"
            >
              <el-option
                v-for="item in bignSchoolYearOptions"
                :key="item.id"
                :label="item.beginDate"
                :value="{value:item.id,label:item.beginDate}"
              >
              </el-option>
            </el-select>
            -
            <el-select
              v-model="ruleForm.endYear"
              placeholder="请选择开始学年"
            >
              <el-option
                v-for="item in endYearOptions"
                :key="item.id"
                :label="item.beginDate"
                :value="{value:item.id,label:item.beginDate}"
              >
              </el-option>
            </el-select>
            <ul>
                <li class="detailColleage">
                  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="ruleForm" label-width="80px">
                        <el-form-item label="院校:" prop="college">
                          <!-- <div class="addSelect"> -->
                            <!-- <p class="superiorCollege">所属院校：</p> -->
                            <el-select
                              v-model="ruleForm.college"
                              clearable
                              placeholder="请选择院校"
                              @clear="infoHandleClear"
                              ref="infoSelectUpResId"
                            >
                              <el-option hidden :value="ruleForm.college" :label="infoUpResName">
                              </el-option>
                              <el-tree
                                :data="editSeletOptions"
                                :props="defaultProps"
                                :expand-on-click-node="false"
                                :check-on-click-node="true"
                                @node-click="infoHandleNodeClick"
                              >
                              </el-tree>
                            </el-select>
                          <!-- </div> -->
                        </el-form-item>
                        <el-form-item label="专业:" prop="major">
                          <!-- <div class="addSelect"> -->
                          <!-- <p class="superiorCollege">所属专业：</p> -->
                          <el-select
                            v-model="ruleForm.major"
                            @change="majorSelect"
                            placeholder="请选择专业"
                          >
                            <el-option
                              v-for="item in editMajorOptions"
                              :key="item.majorId"
                              :label="item.majorName"
                              :value="{value:item.majorId,label:item.majorName}"
                            >
                            </el-option>
                          </el-select>
                          <!-- </div> -->
                        </el-form-item>
                        <el-form-item label="年级:" prop="grade">
                            <el-select
                                v-model="ruleForm.grade"
                                clearable
                                placeholder="请选择年级"
                                @change="gradeChange"
                                style="width: 200px"
                                >
                                <el-option v-for="item in gradetData" :key="item.typeId" :label="item.typeName" :value="{value:item.typeName,label:item.typeId}"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="班级:" prop="clbum">
                          <div class="addInput">
                            <el-select
                              v-model="ruleForm.clbum"
                              @change="clbumChange"
                              placeholder="请选择班级"
                            >
                              <el-option
                                v-for="item in classListData"
                                :key="item.classId"
                                :label="item.className"
                                :value="{value:item.classId,label:item.className}"
                              >
                              </el-option>
                            </el-select>
                          </div>
                        </el-form-item>
                        <el-form-item label="姓名:" prop="name">
                          <el-input type="text" v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="证件号:"  prop="idNumber">
                          <el-input type="text" v-model="ruleForm.idNumber" placeholder="请输入证件号"></el-input>
                        </el-form-item>
                        <el-form-item label="日期:" prop="date">
                         <el-date-picker
                            v-model="ruleForm.date"
                            type="date"
                            placeholder="选择日期">
                          </el-date-picker>
                        </el-form-item>
                        <el-form-item  label="学号:" prop="studentId">
                          <el-input type="text" v-model="ruleForm.studentId" placeholder="请输入学号"></el-input>
                        </el-form-item>
                        <el-form-item label="是否支付:" prop="ifPay">
                          <div class="addInput">
                            <el-select
                              v-model="ruleForm.ifPay"
                              @change="isPayChange"
                              placeholder="是否支付"
                            >
                              <el-option
                                v-for="item in isPayOptions"
                                :key="item.typeId"
                                :label="item.typeName"
                                :value="{value:item.typeId,label:item.typeName}"
                              >
                              </el-option>
                            </el-select>
                          </div>
                        </el-form-item>
                        <el-form-item label="支付方式:" prop="methodPayment">
                          <div class="addInput">
                            <el-select
                              v-model="ruleForm.methodPayment"
                              @change="methodPaymentChange"
                              placeholder="是否支付"
                            >
                              <el-option
                                v-for="item in methodPaymentOptions"
                                :key="item.typeId"
                                :label="item.typeName"
                                :value="item.typeId"
                              >
                              </el-option>
                            </el-select>
                          </div>
                        </el-form-item>
                    </el-form>
                <!-- <li> -->
                </li>
                <!-- <li></li>
                <li>
                  <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </li> -->
            </ul>
            <el-table :data="table" border style="width: 100%">
                <el-table-column prop="chargeItem" label="收费项目" ></el-table-column>
                <el-table-column prop="money" label="应收金额"></el-table-column>
                <!-- <el-table-column prop="paidAmount" label="实收金额"></el-table-column>
                <el-table-column prop="note" label="备注"></el-table-column> -->
            </el-table>
        </el-card>
        <el-button style="margin-top:10px;width:200px;" @click="addReceipt">新增</el-button>
        <div v-if="tableData.length">
          <el-card v-for="(item,index) in arr" class="el-card1" :key='index' style="margin-top:5px;">
            <div :id="'printObj'+item.id">
              <ul>
                <li>
                  <!-- {{option1}} -->
                    <el-select v-model="item.methodCharge" v-if="isDayin" placeholder="请选择支付方式">
                        <el-option
                        v-for="it in option1"
                        :key="it.id"
                        :label="it.label"
                        :value="it.id">
                        </el-option>
                    </el-select>
                    <span v-else>{{item.methodCharge}}</span>
                </li>
                <li style="margin-left:700px;">
                  <div v-if="isDayin">
                    <el-input type="text" class="shouxu" v-model="item.serviceCharge" @input="(value)=>{changeTotal1(value,item.id)}"></el-input>
                    <span style="line-height:40px;">元手续费</span>
                  </div>
                  <span v-else>{{item.serviceCharge}}元手续费</span>
                </li>
                <!-- <li style="line-height:40px;">元手续费</li> -->
              </ul>
              <el-table :data="item.detailsCharges" @selection-change="(value)=>{selectChange(value,item.id)}" border style="width: 100%">
                  <el-table-column type="selection"></el-table-column>
                  <el-table-column prop="chargeItem" label="收费项目" ></el-table-column>
                  <el-table-column prop="money" label="应收金额">
                  </el-table-column>
                  <el-table-column prop="paidAmount" label="实收金额">
                    <template slot-scope="scope">
                      <el-input 
                        v-model="scope.row.paidAmount"
                        @input="(value)=>{changeTotal(value,item.id)}"
                        :disabled="scope.row.chargeItem == '合计金额' ? true :false"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="note" label="备注"></el-table-column>
              </el-table>
              <div class="totals">
                <p>合计金额:{{item.totalAmount}}</p>
              </div>
            </div>
           <el-button style="margin-top:10px;width:200px;" v-print="printObj" @click="dayin(item.id)">打印票据</el-button>
          <!-- <el-button style="margin-top:10px;width:200px;" @click="$router.go(-1)">返回</el-button> -->
        </el-card>
        </div>

        <!-- <div v-if="tableData.length"> -->
          <!-- <el-card  style="margin-top:5px;">
            <div :class="1"  id="printMe">
              <ul>
                <li>
                    <el-select v-model="qwe" v-if="isDayin"  placeholder="请选择支付方式">
                        <el-option
                        v-for="it in option"
                        :key="it.id"
                        :label="it.label"
                        :value="it.id">
                        </el-option>
                    </el-select>
                    <span v-else>{{qwe}}</span>
                </li>
                <li style="margin-left:700px;">
                  <el-input type="text" 
                    class="shouxu" 
                    v-if="isDayin"
                    v-model="ww" 
                  @input="(value)=>{changeTotal1(value)}"></el-input>
                  <span v-if="isDayin">元手续费</span>
                </li>
                <li style="line-height:40px;" v-if="isDayin == false">{{ww}}元手续费</li>
            </ul>
            <el-table :data="table" @selection-change="(value)=>{selectChange(value)}" border style="width: 100%">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="itemCharge" label="收费项目" ></el-table-column>
                <el-table-column prop="receivable" label="应收金额">
                </el-table-column>
                <el-table-column prop="netreceipts" label="实收金额">
                  <template slot-scope="scope">
                    <el-input 
                      v-model="scope.row.paidAmount"
                      :disabled="scope.row.itemCharge == '合计金额' ? true :false"
                      placeholder="实收金额"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="note" label="备注"></el-table-column>
            </el-table>
            <div class="totals">
              <p>合计金额:999</p>
            </div>
            </div>

           <el-button style="margin-top:10px;width:200px;" v-print="printObj" @click="dayin">打印票据</el-button>
          <el-button style="margin-top:10px;width:200px;" @click="$router.go(-1)">返回</el-button>
           <el-button style="margin-top:10px;width:200px;"  @click="queding">确定</el-button>

        </el-card> -->
         
        <!-- </div> -->
       <!-- <div v-if="tableData[0].chargeInformation">
          <div v-for="(item,index) in tableData[0].chargeInformation" :key="index">{{item.paidAmount}}</div>
       </div> -->
        
        <!-- <el-card>
          
            <h4>{{item.schoolYear}}</h4>
            <ul>
                <li>{{item.grade}}    {{item.major}}     {{item.class}}</li>
                <li>{{item.name}}</li>
                <li>{{item.numberID}}</li>
                <li>{{item.createTime}}</li>
            </ul>
            <el-table :data="item.table" border style="width: 100%">
                <el-table-column prop="text" label="收费项目" ></el-table-column>
                <el-table-column prop="receivable" label="应收金额"></el-table-column>
                <el-table-column prop="netreceipts" label="实收金额"></el-table-column>
                <el-table-column prop="title" label="备注"></el-table-column>
            </el-table>
        </el-card>
        <el-card v-for="item in list2" :key="item.id" style="margin-top:5px;">
            <h4>{{item.schoolYear}}</h4>
            <ul>
                <li>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                        v-for="it in item.option"
                        :key="it.id"
                        :label="it.label"
                        :value="it.id">
                        </el-option>
                    </el-select>
                </li>
                <li style="margin-left:700px;">
                  <el-input type="text" v-model="value" ></el-input>
                </li>
                <li style="line-height:40px;">元     手续费</li>
            </ul>
            <el-table :data="item.table" border style="width: 100%">
                <el-table-column prop="text" label="收费项目" ></el-table-column>
                <el-table-column prop="receivable" label="应收金额"></el-table-column>
                <el-table-column prop="netreceipts" label="实收金额"></el-table-column>
                <el-table-column prop="title" label="备注"></el-table-column>
            </el-table>
            <el-button style="margin-top:10px;width:200px;">打印票据</el-button>
            <el-button style="margin-top:10px;width:200px;" @click="$router.go(-1)">返回</el-button>
        </el-card> -->
           <el-button style="margin-top:10px;width:200px;" @click="submitForm('ruleForm')">确定</el-button>
           <el-button style="margin-top:10px;width:200px;" @click="quxiao1">返回</el-button>

    </div>
</template>
<script>
import {
  getchargeListApi,
  detailChargesApi,
  addChargesApi
} from "@/api/finance/chargelist.js"
import {
  getChargeplanListApi
} from "@/api/finance/chargeplan.js"
import {
  colleageTreeDataApi,
  majorListApi,
  getClassGradeListApi,
  getGradeListApi,
} from "@/api/graduation/thegraduate.js"
import {
  getSchoolYearApi
} from "@/api/educational/schoolYear";
export default {
  data() {
    return {
      table: [],
      isPayOptions:[
        {
          typeName:'已支付',
          typeId:'0'
        },
        {
          typeName:'未支付',
          typeId:'1'
        },
      ],
      methodPaymentOptions:[
        {
          typeName:'线上支付',
          typeId:'0'
        },
        {
          typeName:'线下支付',
          typeId:'1'
        },
      ],
      list: [],
      list2: [],
      value:'',
      ruleForm:{
        college:"",
        major:"",
        grade:"",
        clbum:"",
        name:"",
        date:"",
        idNumber:'',
        studentId:'',
        ifPay:'',
        methodPayment:'',
        academicYear:'',
        endYear:''
      },
      ruleObj:{
        college:"",
        major:"",
        grade:"",
        clbum:"",
        name:"",
        date:"",
        idNumber:'',
        ifPay:"",
        studentId:'',
        methodPayment:'',
        academicYear:'',
        endYear:''
      },
      rules:{
        college: [
            { required: true, message: '学院', trigger: 'blur' }
          ],
          major: [
            { required: true, message: '专业', trigger: 'blur' }
          ],
          grade: [
            { required: true, message: '年级', trigger: 'blur' }
          ],
           clbum: [
            { required: true, message: '班级', trigger: 'blur' }
          ],
           name: [
            { required: true, message: '姓名', trigger: 'blur' }
          ],
           date: [
            { required: true, message: '时间', trigger: 'blur' }
          ],
           idNumber: [
            { required: true, message: '证件号', trigger: 'blur' }
          ],
           ifPay: [
            { required: true, message: '是否支付', trigger: 'blur' }
          ],
          studentId: [
            { required: true, message: '学号', trigger: 'blur' }
          ],
          methodPayment: [
            { required: true, message: '支付方式', trigger: 'blur' }
          ],
      },
      editSeletOptions:[],  // 学院数据
      editMajorOptions:[],  // 专业数据
      classListData:[],  // 专业数据
      gradetData:[],  // 专业数据
      defaultProps:{
        children:"children",
        label:"label"
      },
      infoUpResName:"",
      tableData:[],
      to:0,
      qwe:'微信支付',
      ww:"12",
      printObj: {
        id: "printObj0", //打印区域 Dom ID
        // extraHead:`1233333`,
        popTitle: "成绩单详情",
        extraCss: "https://www.google.com,https://www.google.com",
        extraHead:
          `<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printMe { height: auto !important; } <style>`, //  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题；
        closeCallback:()=>{console.log(123123);this.isDayin = true;console.log(this.cloneTable,'tablessssss');this.arr = this.cloneTable}
      },
      isDayin:true,
      cloneTable:[],
      bignSchoolYearOptions:[],
      endYearOptions:[],
      yearFlag:true,
      endYear:'',
      academicYear:'',
      arr:[],
      option1:[
        {
          label:"微信支付",
          id:'0'
        },
        {
          label:"支付宝",
          id:'1'
        }
      ]

      // cloneSelectArr:[]
      

    };
  },
  computed:{
    
  },
  created() {
    


  },
  mounted() {
    console.log(this.$route.params);
    let obj = JSON.parse(sessionStorage.getItem('obj'));
    console.log(obj);
    getchargeListApi().then(res=>{
      if(res.code === 200) {
        this.tableData = res.rows
        this.tableData.forEach(item=>{
          item.chargeInformation = item.chargeInformation ? JSON.parse(item.chargeInformation) :[]
          if(item.chargeInformation) {
            item.chargeInformation.forEach((ite,i)=>{
              ite.id = i
            })
          }
          console.log(item);
        })
        // this.tableData[0].chargeInformation = JSON.parse(this.tableData[0].chargeInformation)
        console.log(this.tableData);
      }else {
        this.tableData = []
      }
    })

    getGradeListApi({parentId:55}).then(res=>{
      console.log(res);
      this.gradetData = res.rows
    })

    this.editSelectTreeData()

    if(sessionStorage.getItem('detailId')) {
      console.log(123);
      detailChargesApi({id:sessionStorage.getItem('detailId')}).then(res=>{
        console.log(res);
        if(res.code === 200) {
          // this.ruleForm = res.data
          this.ruleForm.college = res.data.college
          this.ruleForm.grade = res.data.grade
          this.ruleForm.major = res.data.major
          this.ruleForm.clbum = res.data.clbum
          this.ruleForm.name = res.data.name
          this.ruleForm.idNumber = res.data.idNumber
          this.ruleForm.methodPayment = res.data.methodPayment
          this.ruleForm.ifPay = res.data.ifPay
          this.ruleForm = res.data
          console.log(123123);
          this.academicYear = res.data.academicYear
          this.endYear = res.data.endYear
          console.log(res.data.chargePlans);
          console.log(JSON.parse(res.data.chargeInformation));
          
          this.arr = res.data.chargeInformation ? JSON.parse(res.data.chargeInformation) : []
          this.table = res.data.chargePlans[0].chargeProject ? JSON.parse(res.data.chargePlans[0].chargeProject) : []
          // this.cloneTable = this.table
          console.log(this.arr);
          this.arr.forEach((item,index)=>{
            item.id = index
          })
          // this.arr.forEach(item=>{
          //     console.log(item,'itemmmmmmmmmmmm');

          //   item.detailsCharges.forEach(ite=>{
          //     console.log(ite,'iteeeeeeee');
          //     ite.chargeItem = ite.itemCharge
          //     ite.money = ite.amountReceivable
          //   })
          // })
        }
      })
    }

    getSchoolYearApi().then(res=>{
      console.log(res);
      this.bignSchoolYearOptions = res.rows
      this.endYearOptions = res.rows
    })
    if(obj) {
      console.log(12312312312312);
      getChargeplanListApi({yearStartTime:obj.academicYear,yearEndTime:obj.endYear}).then(res=>{
        console.log(res);
        if(res.code == 200) {
          this.table = res.rows[0].chargeProject ? JSON.parse(res.rows[0].chargeProject) : []
          console.log(this.table);
          this.ruleForm.college = res.rows[0].collegeName
          this.ruleForm.clbum = res.rows[0].className
          this.ruleForm.major = res.rows[0].majorName
          this.ruleForm.grade = res.rows[0].gradeName
          // this.ruleForm.name = res.rows[0].gradeName

          this.ruleObj.college = res.rows[0].collegeName
          this.ruleObj.clbum = res.rows[0].className
          this.ruleObj.major = res.rows[0].majorName
          this.ruleObj.grade = res.rows[0].gradeName
        }
      })
      console.log(obj);
      this.ruleForm.academicYear = obj.academicYear
      this.ruleForm.endYear = obj.endYear
    }

  },
  methods:{
    isPayChange(data) {
      console.log(data);
      this.ruleForm.ifPay = data.label
    },
    methodPaymentChange(data) {
      this.ruleForm.methodPayment = data
    },
    quxiao1() {
      this.$router.push({
        path:"/finance/Chargelist"
      })
      sessionStorage.removeItem('detailId')

    },
    yearSure() {
      if(this.academicYear && this.endYear) {
        this.yearFlag = false
        addChargesApi({academicYear:this.academicYear,endYear:this.endYear}).then(res=>{
          console.log(res);
          this.table = res.data.chargePlans[0].chargeProject ? JSON.parse(res.data.chargePlans[0].chargeProject) : []
          console.log(JSON.parse(res.data.chargePlans[0].chargeProject));
          // if(item.chargeInformation) {
          //   item.chargeInformation.forEach((ite,i)=>{
          //     ite.id = i
          //   })
          // }
        })
      }
    },
    fanhui() {},
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            let obj = {
                academicYear:this.ruleForm.academicYear,
                endYear:this.ruleForm.endYear,
                chargeInformation:this.arr
              }
              this.ruleObj.name = this.ruleForm.name
              this.ruleObj.idNumber = this.ruleForm.idNumber
              this.ruleObj.academicYear = this.ruleForm.academicYear
              this.ruleObj.endYear = this.ruleForm.endYear
              this.ruleObj = this.ruleForm
              console.log(obj);
              console.log(this.ruleObj);
              console.log(this.ruleForm);
              
              addChargesApi({...this.ruleObj,...obj,}).then(res=>{
                console.log(res);
                if(res.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功!"
                  });
                  this.$router.push({
                    path:"/finance/Chargelist"
                  })
                  sessionStorage.removeItem('detailId')

                }else {
                  this.$message({
                    type: "error",
                    message: "添加失败!"
                  });
                }
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      console.log(this.arr);
      
      
    },
    // 手续费
    changeTotal1(val,id) {
      console.log(val);
      let num = 0
      this.arr.forEach((item)=>{
          num = 0
          
          item.detailsCharges.forEach((ite)=>{
            console.log(ite,'888');
            if(item.id == id && ite.state == '1') {
              console.log(ite,'0099991111111');
              num +=  Number(ite.paidAmount)
              item.totalAmount = num + Number(item.serviceCharge)
            }
          //   console.log(ite);
            // if(id == item.id &&ite.state == '1') {
            //   console.log(ite,'0099991111111');
            //   num +=  Number(ite.paidAmount)
            //   item.totalAmount = num + Number(item.serviceCharge)
            // }
            // if(ite.state == '1') {
            //   if(id == item.id && ite.chargeItem != "合计金额") {
            //     console.log(ite);
            //     num +=  Number(ite.paidAmount)
            //     item.totalAmount = num + Number(item.serviceCharge)
            //   }
            // }
            // else {
            //   num = 0
            //   item.detailsCharges.forEach((ite)=>{
            //       if(ite.chargeItem != '合计金额') {
            //         num +=  Number(ite.paidAmount)
            //       }else {
            //         ite.paidAmount = num
            //       }
            //   })
            // }
          })
      })



      // let num = 0
      // this.tableData[0].chargeInformation.forEach((item,index)=>{
      //   if(id == item.id) {
      //     item.detailsCharges.forEach((ite)=>{
      //       if(ite.itemCharge != "合计金额" && ite.state == '1') {
      //           console.log(ite);
      //           num +=  Number(ite.paidAmount)
      //           this.tableData[0].chargeInformation[index].totalAmount = num + Number(val)
      //           item.detailsCharges[item.detailsCharges.length-1].paidAmount = num 
      //           // num = 0
      //         }
      //     })
      //   }

      // })
    },

    // 实收金额input
    changeTotal(val,id) {
      let num = 0
      console.log(id);
      console.log(this.arr);
      this.arr.forEach((item)=>{
          num = 0
          item.detailsCharges.forEach((ite)=>{
            if(ite.state == '1') {
              if(id == item.id) {
                if(ite.chargeItem != "合计金额" && ite.state == '1') {
                  console.log(ite);
                  num +=  Number(ite.paidAmount)
                  item.totalAmount = num + Number(item.serviceCharge)
                }
              }
            }else {
              num = 0
              item.detailsCharges.forEach((ite)=>{
                  if(ite.chargeItem != '合计金额') {
                    num +=  Number(ite.paidAmount)
                  }else {
                    ite.paidAmount = num
                  }
              })
              
            }
          })
      })







      // this.arr.forEach(item=>{
      //   console.log(item);
      // })
      // this.tableData[0].chargeInformation.forEach((item,index)=>{
      //   if(id == item.id) {
      //       console.log(id);
      //       console.log(item);

      //       item.detailsCharges.forEach((ite,i)=>{
      //         if(ite.itemCharge != "合计金额" && ite.state == '1') {
      //           console.log(ite);
      //           num +=  Number(item.detailsCharges[i].paidAmount)
      //             this.tableData[0].chargeInformation[index].totalAmount = num + Number(item.serviceCharge)
      //             item.detailsCharges[item.detailsCharges.length-1].paidAmount = num 
      //             // num = 0
      //         }
      //       })
      //     }
      // })
    },

    // 选择事件
    selectChange(row,id) {
      // this.cloneTable = this.arr
      // row.forEach(item=>{
      //   item.state = '1'
      // })
      // this.selectArr = row
      console.log(this.arr);
      let num = 0
      // console.log(row);
      
      this.arr.forEach((ite)=>{
        ite.detailsCharges.forEach(it=>{
          it.state = '0'
          row.forEach(item=>{
            if(it.id == item.id) {
              it.state = "1"
            }
          })
        })
      })
      console.log(row);
      console.log(id);

      if(row.length > 0) {
        row.forEach((item,index)=>{
          if(item.chargeItem == "合计金额") {
            console.log(item);
            row.splice(index,1)
          } else {
            num +=  Number(item.paidAmount)
            console.log(num);
            this.arr.forEach((ite)=>{
              console.log(ite);
              if(ite.id == id) {

                ite.totalAmount = num + Number(ite.serviceCharge)
                ite.paidAmount = num
                ite.detailsCharges.forEach(it=>{
                  if(it.chargeItem == '合计金额') {
                    console.log(it);
                    it.paidAmount = num
                    // this.$nextTick(()=>{
                    //   this.arr = [...this.arr]
                    //   // ite.paidAmount = ite.money
                    //   // this.$set(ite,"paidAmount",ite.money)
                    // })
                    // this.arr = [...this.arr]
                    console.log(this.arr,'arrrrrr');
                  }
                })
                // item.totalAmount = num + Number(item.serviceCharge)

                // ite.paidAmount = num
                // this.tableData[0].chargeInformation[index].totalAmount = num + Number(item.serviceCharge)
              }
            })
          }
          
        })
      }else {
        // num = 0
        this.arr.forEach((ite)=>{
              console.log(ite);
              if(ite.id == id) {
                ite.totalAmount = ite.paidAmount + Number(ite.serviceCharge)
              }
            })
      }






      // if(row.length > 0) {
      //   row.forEach((item,index)=>{
      //     item.state = '1'
      //     if(item.itemCharge == "合计金额") {
      //       console.log(item);
      //       row.splice(index,1)
      //     } else {
      //       num +=  Number(item.paidAmount)
      //       this.tableData[0].chargeInformation.forEach((item,index)=>{
      //         if(item.id == id) {
      //           console.log(item);
      //           this.tableData[0].chargeInformation[index].paidAmount = num
      //           this.tableData[0].chargeInformation[index].totalAmount = num + Number(item.serviceCharge)
      //         }
      //       })
      //     }
          
      //   })
      // }
      this.selectArr = row
      // this.selectArr = row

    },
    closeCallback() {
      this.isDayin = true
    },
    dayin(id) {
      console.log(id);
      this.printObj.id = 'printObj'+id
      console.log(this.printObj);
      this.isDayin = false
      this.printObj.extraHead =`${this.infoUpResName} ${this.ruleForm.major} ${this.ruleForm.clbum} ${this.ruleForm.grade}<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printMe { height: auto !important; } <style>` //  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题；
      // this.arr = this.cloneTable
      console.log(this.arr,'00000');
      let arr1 = JSON.parse(JSON.stringify(this.arr))
      console.log(arr1);
      this.cloneTable = arr1
      console.log(this.cloneTable,'cloneeee');
      this.arr.forEach(item=>{
        
        item.detailsCharges = this.selectArr
        // item.chargeInformation.forEach(ite=>{
        //   if(ite.id == id) {
        //     ite.detailsCharges = this.selectArr
        //   }
        // })
        console.log(item);
        console.log(this.selectArr);
      })
      // this.table.forEach((item,i)=>{
      //   if(item.state != '1') {
      //     item.detailsCharges.splice(i,1)
      //   }
      // })
      // this.tableData.forEach(item=>{
      //   item.chargeInformation.forEach(ite=>{
      //     if(ite.id == id) {
      //       console.log(ite,'00000');
      //       ite.detailsCharges.forEach((it,i)=>{
      //         if(it.state != '1') {
      //           item.detailsCharges.splice(i,1)
      //         }
      //       })
      //     }
      //   })
      // })
    },

    // 学院
    async editSelectTreeData() {
      const data = await colleageTreeDataApi();
      this.editSeletOptions = data.data;
    },

    // 选择学院
    infoHandleNodeClick(data) {
       console.log(data);
      this.infoUpResName = data.label;
      this.ruleForm.college = data.id;
      this.ruleObj.college = data.label
      // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
      this.$refs.infoSelectUpResId.blur();
      this.editSelectValueHandler(data.label)
    },

    // 新增所属专业下拉框
    async editSelectValueHandler(id) {
      console.log(id,'-----------');
      // console.log(id, "arr");
      const data = await majorListApi({ colleageName: id, status:'0'});
      console.log(data);
      this.editMajorOptions = data.rows;
    },

    // 专业事件
    majorSelect(obj) {
      console.log(obj);
      this.getMajorIdClass(obj.value)
      this.ruleObj.major = obj.label
    },

    // 根据专业id查询班级
    async getMajorIdClass(id) {
     const data = await getClassGradeListApi({majorId:id})
      this.classListData = data.rows
      console.log(data,'-------->班级');
      // this.getCourseData(id)

    },
    gradeChange(data) {
      this.ruleObj.grade = data.label
    },
    clbumChange(data) {
      this.ruleObj.clbum = data.label
    },
    infoHandleClear() {

    },

    // 新增
    addReceipt() {
      // let obj =  this.tableData[0]
      console.log(this.table);
      
      let ar = JSON.parse(JSON.stringify(this.table))
      // this.arr = ar
      var totla = 0
      ar.forEach(item=>{
        totla += item.money
        // this.$set(item,"paidAmount",'0')
      })
      let obj1 = {
        chargeItem:'合计金额',
        money:totla
      }
      ar.push(obj1)
      console.log(totla);
      console.log(ar);
      let obj = {
        methodCharge:'',
        serviceCharge:'',
        detailsCharges:[],
        totalAmount:totla,
      }
      
      
      let filterItem = this.arr.some(item=>{
        return item.chargeItem == '合计金额'
      })
      if(!filterItem) {
        // this.arr.push(obj1)
        obj.detailsCharges.push(...ar)

      }
      console.log(this.arr,'0001111');
      console.log(obj.detailsCharges,'0001111');
      obj.detailsCharges.forEach((item,index)=>{
        item.id = index
        item.state = '0'
        item.paidAmount = item.money
      })
      this.arr.push(obj)
      // console.log(this.arr);
      this.arr.forEach((item,index)=>{
        item.id = index
        // item.detailsCharges.forEach((ite,i)=>{
        //   ite.id = i
        //   ite.state = '0'
        //   // ite.paidAmount = ite.money
        //   console.log(ite,'00111');
        //   this.$set(ite,"paidAmount",ite.money)
        //   // this.$nextTick(()=>{
        //     // ite.paidAmount = ite.money
        //     // let obj = JSON.parse(JSON.stringify(ite))
        //     // ite = obj
        //   // })

        // })
      })
      // this.arr = [...this.arr]
      console.log(this.arr);
      // let obj = {
      //   // methodCharge:'',
      //   // serviceCharge:'',
      //   // detailsCharges:[],
      //   // totalAmount:'',
      //   academicYear:'',
      //   chargeInformation:[],
      //   college:'',
      //   major:'',
      //   grade:'',
      //   studentId:'',
      //   idNumber:'',
      //   ifPay:'',
      // }
      // obj.detailsCharges.push(...this.table)
      // console.log(this.tableData);
      // this.tableData[0].detailsCharges = []
      // this.tableData[0].chargeInformation.push(obj)
      // console.log(obj);
      // this.tableData
      // this.tableData = 

      // obj.detailsCharges.forEach(item=>{
      //   item.paidAmount = item.amountReceivable
      // })
      // let numId = Object.assign({},obj,{id:obj.detailsCharges.length})
      // console.log(obj);
      // // console.log(this.table.detailsCharges,'999999');
      // this.table.detailsCharges.push(numId)
      // let mapArr = this.tableData[0].chargeInformation.map(item=>{
      //   return item.detailsCharges.map(ite=>{
      //     return {paidAmount : ite.amountReceivable,...ite}
      //   })
      // })
      // console.log(mapArr);
    }

  }
};
</script>
<style lang="scss" scoped>
.plandetail {
  width: 100%;
  padding: 10px;
  position: relative;
  .zheBox{
    width: 100%;
    height: 100%;
    background-color: white;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;

  }
  h4 {
    color: #5995d7;
  }
  ul{
    // display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 14px;
    align-items: center;
    margin-bottom: 15px;
    li{
      display: inline-block;
      .shouxu{
        width: 50px;
      }
    }
    .detailColleage{
      display: flex;
      p{
        margin-right: 10px;
      }
      ::v-deep .ruleForm{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .el-form-item{
          width: 210px;
          // display: flex;
          .el-form-item__label{
            width: 80px !important;
            font-size: 12px !important;
          }
          .el-form-item__content{
            margin-left: 0 !important;
            .el-select{
              width: 100px !important;
              .el-input{
                width: 120px;
              }
            }
            .el-input{
              width: 99px;
            }
          }
        }
      }
    }
  }
  ::v-deep .el-card1 .el-card__body .el-table__row:nth-last-child(1) td:first-child .el-checkbox{
    background: red;
    display: none;

  }
}
</style>
